<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/hxsd_tools.js"></script>
		<style type="text/css">
			*{ margin: 0;padding: 0;}
			body{background: #1B2918; font-family: "微软雅黑";}
			li{ list-style: none;}
			h2{ text-align: center; color: #fff;padding: 20px 0;}
			.title{ text-align: center; padding: 20px 0;}
			.title input{ border: none; height: 40px;}
			.title button{ border: none; height: 40px;}
			#wrap{width:810px;min-height:160px; margin: 0 auto; border: 2px solid #000; background: #277800; }
			#wrap ul{  padding: 5px;list-style: none;  position: relative;height: 450px;}
			#wrap li{ float: left; margin: 5px; width: 90px;height: 135px; position: relative;}
			#wrap li div{ width: 100%;height: 100%;display: block; z-index: 110; position: absolute;top: 0;left: 0; background-image: url(images/back01.jpg); background-size: cover; border-radius: 6px;overflow: hidden; cursor: pointer;}
			#wrap img{width: 100%; height: 100%;cursor: pointer;} 
			#wrap li.ac div{ display: none;}
			button{ width: 80px;height: 40px;line-height: 40px; text-align: center; cursor: pointer;}
		</style>
	</head>
	<body>
		<h2>选择游戏难度，点击开始游戏，找到两张相同的牌会消失</h2>
		<div class="title">
			<input type="text" id="txt" placeholder="难度2-12"/>
			<button type="button">开始游戏</button>
			<button type="button">重新开始</button>
		</div>
		<div id="wrap">
			<ul>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var oWrap =document.getElementById("wrap");
		var oUl = document.getElementsByTagName('ul')[0];
		var oBtn = document.getElementsByTagName('button')[0];
		var reload = document.getElementsByTagName('button')[1];
		var oTxt = document.getElementById("txt");
		var prev;		//前一次翻开的牌
		var prevTime = 0;
		
		oBtn.onclick = function(){
			//难度校验
			if(oTxt.value == '' || isNaN(oTxt.value) || oTxt.value == '1' || parseInt(oTxt.value)>12){
				 alert('请输入难度，数字2-12');
				 return;
			}
			
			var oPrevDate = new Date();
			prevTime = oPrevDate.getTime();
			console.log('time '+prevTime);
			
			this.disabled = true;
			var arr = [];
			var level = parseInt(oTxt.value);
			
			for(var i=0; i<level; i++){
				arr.push(i,i);
			}
			for(var j=0; j<level*2; j++){
				var index = parseInt(Math.random()*arr.length);
				var oLi = document.createElement('li');
				var oDiv = document.createElement('div');
				var oImg = document.createElement('img');
				oLi.appendChild(oImg);
				oLi.appendChild(oDiv);
				oLi.setAttribute("data",arr.splice(index,1));
				oUl.appendChild(oLi);
			}
			
			var aLi = oUl.children;
			for(var n=aLi.length-1; n>=0; n--){
				aLi[n].style.left = aLi[n].offsetLeft+'px';
				aLi[n].style.top = aLi[n].offsetTop+'px';
				aLi[n].style.position = 'absolute';
			}
		}
		oUl.onclick = function(ev){
			ev.stopPropagation();
			var elm = ev.target;
			
			if(elm.tagName == "DIV"){
				var aLi = oUl.children;
				for(var i=0; i<aLi.length; i++){
					aLi[i].className = '';
				}
				var Oli = elm.parentNode;
				var num = Oli.getAttribute("data");
				var oImg = Oli.getElementsByTagName('img')[0];
				Oli.className = 'ac';
				oImg.src = "images/"+num+".jpg";
				
				if(prev){
					if(num == prev.parentNode.getAttribute("data")){
						Oli.className = 'ac';
						prev.parentNode.className = 'ac';
						
						shake(Oli,5,"left");
						shake(prev.parentNode,5,"left",calTime);
					}
				}
				prev = elm;
			}
		}
		
		reload.onclick = function(){
			location.reload();
		}
		
		function shake (obj,offset,dir,fn) {
			clearInterval(timer);
			var str = dir.substring(0,1).toUpperCase()+dir.substring(1);
			var dirValue = obj["offset"+str];
			var num = -1;
			var arr = [];
			var p = offset || 10;
			
			for(var i=p; i>=0; i--){
				arr.push(-i,i);
			}
			
			var timer = setInterval(function(){
				num++;
				if(num == arr.length){
					clearInterval(timer);
//					obj.style.display = 'none';
					oUl.removeChild(obj);
					fn&&fn();
				}
				obj.style[dir] = dirValue+arr[num]+'px';
			},50);
		}
		
		function calTime () {
			if(oUl.children.length == 0){
				console.log("oUl.children: "+oUl.children.length);
				var oNowDate = new Date();
				var nowTime = oNowDate.getTime();
				console.log("nowTime: "+nowTime);
				
				var dis = (nowTime-prevTime)/1000;
				var mins = parseInt(dis%3600/60);
				var secs = parseInt(dis%60);
				(mins > 0)? alert("恭喜您过关！！您用了"+mins+"分"+secs+"秒"):alert("您用了"+secs+"秒");
				
				location.reload();
			}
		}
	</script>
</html>
